<!DOCTYPE html>
<html>
<head>
    <title>Potential Step Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to mimic the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round'; // Makes line ends rounded
        ctx.lineJoin = 'round'; // Makes line corners rounded

        // Coordinate definitions
        const y_axis_x = 150;
        const x_axis_y = 300;
        const x0_x = 350;
        const v0_y = 150;

        const axis_start_x = 50;
        const axis_end_x = 550;
        const axis_start_y = 400;
        const axis_end_y = 50;

        // Draw Axes
        ctx.beginPath();
        // X-axis
        ctx.moveTo(axis_start_x, x_axis_y);
        ctx.lineTo(axis_end_x, x_axis_y);
        // Arrowhead for X-axis
        ctx.moveTo(axis_end_x, x_axis_y);
        ctx.lineTo(axis_end_x - 12, x_axis_y - 6);
        ctx.moveTo(axis_end_x, x_axis_y);
        ctx.lineTo(axis_end_x - 12, x_axis_y + 6);

        // Y-axis (V(x) axis)
        ctx.moveTo(y_axis_x, axis_start_y);
        ctx.lineTo(y_axis_x, axis_end_y);
        // Arrowhead for Y-axis
        ctx.moveTo(y_axis_x, axis_end_y);
        ctx.lineTo(y_axis_x - 6, axis_end_y + 12);
        ctx.moveTo(y_axis_x, axis_end_y);
        ctx.lineTo(y_axis_x + 6, axis_end_y + 12);
        ctx.stroke();

        // Draw Potential Step Plot
        ctx.beginPath();
        // V(x) = 0 for x < x0
        ctx.moveTo(axis_start_x, x_axis_y);
        ctx.lineTo(x0_x, x_axis_y);
        // Vertical step at x = x0
        ctx.lineTo(x0_x, v0_y);
        // V(x) = V0 for x > x0
        ctx.lineTo(axis_end_x, v0_y);
        ctx.stroke();

        // Draw dashed line for V0
        ctx.save();
        ctx.setLineDash([8, 6]);
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(y_axis_x, v0_y);
        ctx.lineTo(x0_x, v0_y);
        ctx.stroke();
        ctx.restore();

        // Draw Labels
        // Using a serif font that looks a bit like the original's handwritten text
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // V(x) label
        ctx.fillText('V(x)', y_axis_x, axis_end_y - 20);
        
        // x label
        ctx.fillText('x', axis_end_x + 15, x_axis_y + 5);

        // 0 label at origin
        ctx.fillText('0', y_axis_x, x_axis_y + 20);

        // x₀ label
        // Using Unicode for subscript '0'
        ctx.fillText('x\u2080', x0_x, x_axis_y + 20);

        // V₀ label
        ctx.textAlign = 'right';
        ctx.fillText('V\u2080', y_axis_x - 20, v0_y);
        
        // Figure Caption
        ctx.font = 'bold 22px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 1.26', canvas.width / 2, 430);

    </script>
</body>
</html>